<template>

	<div>
		<Hearder title="角色管理" listName="角色列表"></Hearder>

		<!-- 搜索 -->
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="名称">
				<el-input v-model="search.name" placeholder="角色名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getBranList">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="pojo= {} , dialogVisible = true">新建</el-button>
			</el-form-item>
		</el-form>    
		<!-- 对话框 -->
		<el-dialog
		:title="pojo.id ? '编辑角色':'新建角色'"
		:visible.sync="dialogVisible"
		width="35%"
		> 
		<el-form :inline="false" class="demo-form-inline" label-width="90px">
			<el-form-item label="部门名称">
				<el-input v-model="pojo.name" placeholder="部门名称">{{pojo.name}}</el-input>
			</el-form-item>
		
		<el-form-item label="职能描述">
			<el-input type="textarea" v-model="pojo.seq" placeholder="职能描述">{{pojo.seq}}</el-input>
		</el-form-item>
		<el-form-item>
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save">确 定</el-button>
		</el-form-item>
	</el-form>
</el-dialog>
<!-- 数据表单      -->
<el-table
:data="tableData"
style="width: 100%; height: 500px;">
<el-table-column
label="角色名称"
prop="id">
</el-table-column>
<el-table-column
label="职能描述"
prop="name">
</el-table-column>
<el-table-column
label="成员数量"
prop="letter">
</el-table-column>
<el-table-column
label="添加时间"
prop="letter">
</el-table-column>
<el-table-column label="是否启用">
	<template slot-scope="scope">
		<el-switch
		v-model="scope.row.isShow"
		active-color="#13ce66"
		inactive-color="#ff4949"
		active-value="1"
		inactive-value="0">
	</el-switch>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column
align="right">
<template slot-scope="scope">
	<el-button
	size="mini"
	type="text"
	@click="fecthById(scope.row)">权限设置</el-button>
	<el-button
	size="mini"
	type="text"
	@click="fecthById(scope.row)">编辑</el-button>
	<el-button
	size="mini"
	type="text"
	@click="deleteById(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页条 -->
<div>
	<el-pagination layout="total,prev, pager, next,jumper" :total="total" :page-size="pageSize" @current-change="getBranList"
	@size-change="getBranList"
	:current-page.sync="currentPage"
	>
</el-pagination>
</div>
</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				search: {
					name: '',
					letter: ''
				},
				pageSize: 5,  
				currentPage: 1,
				total: 30,
				dialogVisible: false,
				pojo: {
					image: '',
					name: '',
					letter:'',

				},

			}
		},    
		created() {
			this.getBranList();

		},
		computed: {

		},
		methods: {
      //获取品牌列表
      async getBranList() {
      	const  res =  await this.$http.post(`/api/brand/findPage.do?page=${this.currentPage}&size=${this.pageSize}`,this.search)
      	this.tableData = res.data.rows;
      	this.total =  res.data.total;
      	console.log(222)

      },
       // 新建 与编辑
       async save() {
      	// 通过判断id是否为空来发起不同的请求
      	const res = await this.$http.post(`/api/brand/${this.pojo.id == null ? 'add' : 'update'}.do`,this.pojo);
          // if (this.pojo.id) {
          // const res = await this.$http.put(`http://localhost:3000/brand/${this.pojo.id}`,this.pojo)
          // }else {
          // this.$http.post(`http://localhost:3000/brand`,this.pojo);
          // }
          this.dialogVisible = false;
          // 刷新列表
          this.getBranList();
          this.$message({
          	type: 'success',
          	message: this.id?'修改成功':'保存成功'
          });
          

      },
      async fecthById(row){
      	alert(row.id)
      	this.dialogVisible = true
      	const res = await this.$http.get(`/api/brand/findById.do?id=${row.id}`)
          // const res = await this.$http.get(`http://localhost:3000/brand?id=${row.id}`)

          this.pojo =  res.data;
          console.log(res)
          
          
      },
      async deleteById(row) {
      	this.$confirm('是否确定要删除'+row.name+'成员?', '提示', {
      		confirmButtonText: '确定',
      		cancelButtonText: '取消',
      		type: 'warning'
      	}).then(async () => {
      		const res = await this.$http.get(`/api/brand/delete.do?id=${row.id}`)
          // const res = await this.$http.delete(`http://localhost:3000/brand/${row.id}`)
          this.$message({
          	type: 'success',
          	message: '删除成功!'
          });
          //删除成功 查询获取数据
          this.getBranList()
      })
      }
      
  },
}
</script>
<style scoped>

</style>